﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <h2>Complaint Test~~~</h2>
    <form id="userData">
        <label>User Name</label>
        <input type="text" name="userName" placeholder="userName" />
        <br />
        <label>Password</label>
        <input type="password" name="Password" placeholder="Password" />
        <br />
        <input type="submit" id="login" value="login" />
    </form>

    <form id="complaintData">
        <label>UserName</label>
        <input type="text" name="UserName" />
        <br />
        <label>Text</label>
        <input type="text" name="Text" />
        <br />
        <label>Company</label>
        <input type="text" name="Company" />
        <br />
        <label>Picture</label>
        <input type="text" name="PicturePath" />
        <br />
        <label>Location</label>
        <input type="text" name="Location" />
        <br />
        <label>Tags</label>
        <input type="text" name="Tag" />
        <br />
		<label>Coordinates</label>
		<input type="text" name="coor" />
		<br />
        <input type="submit" id="addComplaint" value="addComplaint" />
    </form>

    <form id="complaint">
        <label>User ID</label>
        <input type="text" name="userId" />
        <br />
        <label>Complaint ID</label>
        <input type="text" name="complaintId" />
        <br />
        <input type="submit" id="followed" value="followed" />
    </form>

    <input type="button" id="getByUserName" value="getByUserName" />
    <input type="button" id="getAll" value="getAll" />

    <pre id="output">

    </pre>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>


    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>
        $(function () {
            var accessToken = "";

            var login = function () {
                var url = "/Token";
                var data = $("#userData").serialize();
                data = data + "&RememberMe=true&grant_type=password";
                $.post(url, data)
                    .success(saveAccessToken)
                    .always(showRespond);

                return false;
            }

            var saveAccessToken = function (data) {
                accessToken = data.access_token;
            }

            var showRespond = function (object) {
                $("#output").text(JSON.stringify(object, null, 4));
            }

            var addComplaint = function () {
                var url = "/api/Complaints/Post";
                var data = $("#complaintData").serialize();
                $.post(url, data)
                    .always(showRespond);

                return false;
            }

            var getByUserName = function () {
                var url = "/api/Complaints/GetByName";
                var data = $("#complaintData").serialize();
                $.ajax(url, {
                    data: data,
                    type: "GET",
                    headers: getHeaders()
                }).always(showRespond);
            }

            var followed = function () {
                var url = "/api/Complaints/Followed";
                var data = $("#complaint").serialize();
                $.ajax(url, {
                    data: data,
                    type: "POST",
                    headers: getHeaders()
                }).always(showRespond);

                return false;
            }

            var getAll = function () {
                var url = "/api/Complaints/GetAll";
                $.get(url)
                    .always(showRespond);

                return false;
            }

            var getHeaders = function () {
                if (accessToken)
                    return { "Authorization": "Bearer " + accessToken };
            }

            $("#login").click(login);
            $("#addComplaint").click(addComplaint);
            $("#getAll").click(getAll);
            $("#getByUserName").click(getByUserName);
            $("#followed").click(followed);
        });
    </script>
</body>
</html>
